1 00:00:00,720 --> 00:00:03,100 Hello and welcome to this lecture. 2 00:00:03,270 --> 00:00:14,690 In this lecture we will be creating the functionality for the app using JavaScript and G query. 3 00:00:15,360 --> 00:00:25,920 I have got my javascript text editor all file open so this is where I will be adding hardware javascript 4 00:00:26,010 --> 00:00:37,720 and jaquie is going to be looked using variables counter and somjee query select is no key. 5 00:00:37,740 --> 00:00:47,950 I have added Sonn code inside my javascript section of the projet file. 6 00:00:48,120 --> 00:00:52,810 So like one here I have defined a variable chord collars. 7 00:00:53,010 --> 00:00:59,300 Variables are used to store values that you can retrieve and use later. 8 00:00:59,580 --> 00:01:07,140 So have created a variable with the word v r and have given it the name colours. 9 00:01:07,170 --> 00:01:13,800 So that's how you equate a variable you type in the AH space and then the name of the variable is a 10 00:01:13,800 --> 00:01:24,690 good idea to name the variables as closely as possible to reflect on what you want the variable to do. 11 00:01:24,990 --> 00:01:37,290 So the variable is equal to a free variable stores one value but an array can't store several values 12 00:01:37,460 --> 00:01:38,890 has one. 13 00:01:38,930 --> 00:01:47,340 It can see you can identify an array where the square brackets saw lots of different values inside the 14 00:01:47,340 --> 00:01:55,290 arrays but they are regarded as one variable which is equal to this column here. 15 00:01:55,560 --> 00:02:01,090 If I wasn't using an array I would only be a live only be able to store one value. 16 00:02:01,280 --> 00:02:10,320 So by using an array you can store more people values as one value but each of the values in the array 17 00:02:10,830 --> 00:02:15,990 can be accessed by their index. 18 00:02:16,020 --> 00:02:20,690 The first is known as 0 1 to 3 and so on. 19 00:02:20,760 --> 00:02:31,260 So if I wanted to access this variable now with an index of 2 it will be this that I will get. 20 00:02:31,350 --> 00:02:34,390 So it will be 0 1 2. 21 00:02:34,620 --> 00:02:38,710 Sorry if I want to access the variable with an index of 2. 22 00:02:38,730 --> 00:02:41,190 It will be this one to be green. 23 00:02:41,220 --> 00:02:47,850 So this is the 0 1 2 so they have is zero based index. 24 00:02:47,850 --> 00:02:55,890 So defining the variable which we will use later to change the colours on line 3. 25 00:02:55,920 --> 00:02:59,290 Hi I have defined a counter. 26 00:02:59,370 --> 00:03:04,350 Kind of like is equal to zero which is known as a counter. 27 00:03:04,350 --> 00:03:12,360 Basically what this would do when the page loads the Cantar is set had zero. 28 00:03:12,700 --> 00:03:18,170 Okay before you starts use the values of the variable. 29 00:03:19,660 --> 00:03:27,690 I have added some more code from line six to nine lines six years used the dollar sign. 30 00:03:27,700 --> 00:03:34,980 Any way you see the dollar sign you know that you are referencing the jig query library. 31 00:03:35,110 --> 00:03:42,780 So line 6 here what that code is going to do is using the dollar sign and inside the dollar sign. 32 00:03:42,780 --> 00:03:46,510 The parenthesis is taking an idea. 33 00:03:46,570 --> 00:03:56,430 Attribute as the select all this change carlaw is derived from this change caller I.D. input. 34 00:03:56,530 --> 00:03:57,990 That's what is talking about. 35 00:03:57,990 --> 00:04:11,370 So the jig query select or picks up that attribute and at taxes dot click event because there's a button. 36 00:04:11,470 --> 00:04:19,630 Let's go back and check here because it's a button so is attached a click event and that click event 37 00:04:20,010 --> 00:04:20,830 is equal. 38 00:04:20,840 --> 00:04:23,270 So this function here. 39 00:04:23,440 --> 00:04:27,090 What's in between is college braces is what the function will do. 40 00:04:27,340 --> 00:04:35,780 So what the code is saying is that when the button is clicked it will execute that function. 41 00:04:35,780 --> 00:04:37,080 How why the function is. 42 00:04:37,120 --> 00:04:42,600 Online 7 function will grab the div. 43 00:04:43,180 --> 00:04:50,080 Okay if we go back to our hate mail we see we've got a div here so when the button does button is clicked 44 00:04:51,160 --> 00:04:54,930 it'll pig deep it will target that deaves there. 45 00:04:55,370 --> 00:05:07,460 Okay and attach is csx method to it an inside the inside that method or function it takes in the background 46 00:05:07,600 --> 00:05:17,530 column so slim that it would change the background or use in C Ss and it will pick the values from these 47 00:05:17,530 --> 00:05:23,770 variable called collars which we have defined here and it will start with the counter. 48 00:05:23,770 --> 00:05:31,540 We've set the counter to zero so that means it will start from red so when we do the default value off 49 00:05:32,380 --> 00:05:35,730 the box will be class. 50 00:05:35,740 --> 00:05:41,590 What this is are is come like is sets the counter a starting point. 51 00:05:41,590 --> 00:05:46,840 So it's taking the starting point would be read which is which is zero. 52 00:05:46,960 --> 00:05:50,290 Which is I hear and I hear where the value of zero. 53 00:05:50,560 --> 00:05:57,060 So it was tough the contact read and then as we click it will go to the columns and then back again. 54 00:05:57,430 --> 00:06:00,400 Okay that's all that does online it says. 55 00:06:00,490 --> 00:06:01,290 If I. 56 00:06:01,300 --> 00:06:08,660 Which is there is equal to R is double equals means strictly equal to. 57 00:06:08,650 --> 00:06:14,070 If it is strictly equal to the core laws don't let talking about is variable. 58 00:06:14,080 --> 00:06:20,940 Does length mean in the length of the variable which is 1 2 3 4 5 6 7 yet. 59 00:06:20,950 --> 00:06:28,980 If this count I here is strictly equal to is variable quads calls dot the left. 60 00:06:29,170 --> 00:06:33,850 That is the talk and about the length of the content of the aree. 61 00:06:34,100 --> 00:06:39,440 Yeah if it was true down minus 1 then 0. 62 00:06:39,700 --> 00:06:44,820 There you go back to zero and then you start the contact again so it restarts again. 63 00:06:44,840 --> 00:06:48,260 One plus one unsewn and keeps going. 64 00:06:48,280 --> 00:06:53,530 Each time it goes to the end you reset the counter and start again as you click. 65 00:06:53,530 --> 00:07:00,610 That's what that code is saying to let me say this good and we can have a look and see what it looks 66 00:07:00,610 --> 00:07:02,310 like. 67 00:07:02,620 --> 00:07:06,010 Okay so this changed it. 68 00:07:06,040 --> 00:07:07,990 Let's see if it works. 69 00:07:08,290 --> 00:07:08,890 Excellent. 70 00:07:08,890 --> 00:07:11,340 It works for spread gas. 71 00:07:11,380 --> 00:07:13,140 The beginning of the counter. 72 00:07:13,390 --> 00:07:15,850 Okay then blue and so on. 73 00:07:15,920 --> 00:07:24,220 Ah so we have successfully implemented our code to change the colours of the deep. 74 00:07:24,220 --> 00:07:28,070 Notice here the select toys will be applying to the D. 75 00:07:28,120 --> 00:07:35,770 If I had used the body instead of this so looked on it would change the colour of the body off the page. 76 00:07:35,770 --> 00:07:40,250 The entire body might have targeted just this deep element. 77 00:07:40,750 --> 00:07:43,530 So that's it for this project. 78 00:07:43,600 --> 00:07:45,720 Thank you so much for watching. 79 00:07:45,730 --> 00:07:51,550 Please feel free to play around with it and change some of the values and do let me know if you have 80 00:07:51,640 --> 00:07:52,820 any issues. 81 00:07:53,080 --> 00:07:54,880 Thank you and all the best. 82 00:07:54,880 --> 00:07:55,940 Bye for now.